<template>
	<view class="order-yes">
		<newLine></newLine>

		<!-- 地址 -->
		<view class="order-map" @tap="goToMyPath">
			<span class="iconfont icon-dizhi"></span>

			<template v-if="path">
				<view class="map-title">
					<view class="map-name">收件人:{{path.name}}</view>
					<view>收货地址:{{path.city}} {{path.details}}</view>
				</view>
				<view class="map-number">{{path.tel}}</view>
			</template>

			<template v-else>
				<view class="map-name">请选择收货地址</view>
			</template>

		</view>

		<!-- 商品 -->
		<view class="shop-list">
			<view class="shop-item">

				<view class="shop-content">
					<image class="shop-img" src='../../static/img/my_1.jpg' mode=""></image>
					<view class="shop-text">
						adasdkljasdjklasdasdasd
						<view class="f-color">颜色分类:红红</view>
						<view class="f-active-color">7天无理由</view>
					</view>
					<view>
						<view>￥44</view>
						<view class="f-active-color">*2</view>
					</view>
				</view>

			</view>
		</view>

		<!-- 底部 -->
		<view class="order-foot">
			<view>合计:<text class="f-active-color">$12121</text></view>
			<view class="config" @tap="goToWx">提交订单</view>
		</view>

	</view>
</template>

<script>
	import {mapGetters} from "vuex"
	import orderList from '@/component/order-list.vue'
	import newLine from '@/component/line.vue'
	export default {
		data() {
			return {
				path: false
			}
		},

		onLoad() {
			// 对跳转页面进行判断
			if (this.detailPath.length) {
				this.path = this.detailPath[0]
			}
			uni.$on("selectPathItem",(res)=>{
				this.path=res
			})
		
		},
		
		onUnload() {
			uni.$off("selectPathItem",()=>{})
		},
		methods: {
			goToMyPath() {
				uni.navigateTo({
					url:"/pages/my-path/my-path?type=selectPath"
				})
			}
			,
			goToWx(){
				uni.navigateTo({
					url:"/pages/payment/payment"
				})
			}

		},

		computed: {
			...mapGetters(['detailPath'])
		},
		components: {
			newLine,
			orderList
		}

	}
</script>

<style scoped>
	.order-yes {
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
	}

	.order-map {
		padding: 20rpx 20rpx;
		background-color: white;
		line-height: 40rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.map-title {
		width: 600rpx;
		padding: 0 5rpx;
		font-size: 26rpx;
		/* display: flex;
		justify-content: space-between; */
	}

	.order-map .iconfont {
		font-size: 60rpx;
	}

	.map-name {
		font-weight: bold;
	}

	.map-number {
		padding-bottom: 42rpx;
	}

	.shop-content {
		background-color: #f7f7f7;
		border-bottom: 2rpx solid #f0ebeb;
		padding: 10rpx 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.shop-img {
		width: 160rpx;
		height: 160rpx;
	}

	.shop-text {
		width: 400rpx;
		padding: 0 5rpx;
		font-size: 26rpx;
	}

	.order-foot {
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: white;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	.config {
		color: white;
		background-color: #49BDFB;
		padding: 10rpx 30rpx;
	}
</style>